<template>
    <div>
        <span>热门推荐</span>
        <a href="">华语|</a>&nbsp;
        <a href="">流行|</a>&nbsp;
        <a href="">摇滚|</a>&nbsp;
        <a href="">电子|</a>
        <hr style="height: 10px;">
        <div @click="setRouterimg">
            <img src="http://p1.music.126.net/vZ5ef3WzRneTTydXSzPauQ==/109951165994871935.jpg" alt="" width="200"
                height="200">
            <p>别急，甜甜的恋爱马上就轮到你了</p>
        </div>

        <p>热门推荐</p>
        <p>新碟上架</p>
        <p>榜单</p>
    </div>
    <hr>
    <div @click="getlif">
        <p>{{ msg }}</p>
    </div>
    <div>
        <button id="count" @click="count++">{{ count }}</button>
    </div>
</template>

<script setup>
import { onMounted, onUpdated, ref } from 'vue';
import { useRouter } from 'vue-router'
const router=useRouter()  //路由跳转
const msg = "我是推荐页面"
const count = ref(0)

const setRouterimg = () => { 
    console.log("点击了图片");
    //router.push("/muiscdite")  // 可以采用path 或者 name 来进行路由跳转
    // router.push({name:"muiscdite",params:{id:123}})
    router.push({ name: "muiscdite", query: { id: 123 } })
    
}
const getlif=()=>{
    console.log("点击了图片");
}
//页面挂载 当页面加载的时候会把索要执行的函数或变量 一并显示到页面
// onMounted 也是立即执行
onMounted(() => { 
    getlif()
    console.log("我是推荐页面组件的mounted生命周期钩子函数执行了");
    
})
//
onUpdated(() => { 
    console.log(document.getElementById("count").textContent);
    
})
</script>

<style lang="scss" scoped>

</style>